
import ReactDOM from 'react-dom/client'
import React,{Fragment} from 'react'
import './index.css'
const root=ReactDOM.createRoot(document.getElementById('root'))
/*
   一、jsx的语法的规范要求
   jsx是以<>开始</>为结尾的，这个开始标签中的元素可以是HTML的元素，也可以是React的组件
   1、jsx必须要有一个根元素
   问题：为了变成真实DOM不产生多余的容易标签，但是还要保证jsx只有一个根元素，做法如下
   1）使用React.Fragement的方式来包裹
   可以使用<React.Fragment>也可以<Fragment>
   2)直接使用空标签的方式来解决(它的底层也是React.Fragment)
   2、jsx必须要有正确的嵌套,标签必须要有结束标签，如果是但标签可以在开始标签中使用/作为结束
   3、特殊属性的要求
    1)使用className代替class属性
    2）使用htmlFor代替for属性
   4、React的命名规则采用驼峰式命名法
    驼峰命名法规则:如果是一个单词全部小写，如果是两个以上的单词第二个单词开始每个单词的首字母大写
    1)HTML 元素名称应该以小写字母开头，使用驼峰命名法。例如：`div`、`span`、`input`
    2)属性名称应该以小写字母开头，使用驼峰命名法。例如：`className`、`onClick`
    3)属性名称采用驼峰命名法来代替短横线命名法,注意：如果使用短横线也可以，但是必须使用""给括起来
   5、使用小括号将jsx括起来
   二、使用JSX渲染页面
   1、渲染文本和属性
   2、三元表达式、数学运算
   3、函数表达式
   4、对象表达式：必须要进行JSON转换

*/
let name="张无忌"
let avatar="https://bpic.51yuansu.com/pic3/cover/02/25/53/59bf2dafd5fb1_610.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100"
let age=30
let father={
    name:'张翠山',
    wife:{
        name:'殷素素',
        father:{
            name:'白眉鹰王'
        }
    }
}
function ageDesc(age){
    if(age>=20&&age<30){
        return "弱冠"
    }else if(age>=30&&age<40){
        return "而立"
    }else if(age>=40&&age<50){
        return "不惑"
    }   
}
let rootElement=(<>
    <h1>学生简介</h1>
    <div>姓名:{name}</div>   
    <div>
        <img src={avatar}></img>
    </div>
    <div>{age>=30?'而立之年':''}</div>
    <div>虚岁:{age+1}</div>
    <div style={{color:'red'}}>{ageDesc(45)}</div>
    <hr></hr>
    <div>
        {JSON.stringify(father)}
    </div>
</>)
   
root.render(rootElement)
